/**
 * @Title: index.js
 * @Description: index
 * @author: Fanchao
 * @date: 2020/8/8 2:56 下午
 * @version V1.0
 */
import React, { Component, Fragment } from 'react';
import styles from './index.less';
import SectionTitle from 'components/SectionTitle';
import { Form, Input, DatePicker, Button, Cascader } from 'antd';
import { connect, Link } from 'umi';
import { history } from 'umi';
import moment from 'moment';

const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 16 },
};
const tailLayout = {
    wrapperCol: { offset: 4, span: 16 },
};


@connect(({ loading, register, dispatch }) => ({ loading, register, dispatch }))
class Index extends Component {
    render() {
        const { dispatch, register: { treeData }, loading } = this.props;
        const handleOk = values => {
            values.accessToken = {};
            values.userRoleType = 'Student';
            values.enterSchoolDate = moment(values.enterSchoolDate).format('YYYY-MM-DD');
            values.leastDepartmentId = values.leastDepartmentId.pop();
            dispatch({
                type: 'register/registerStudentUser',
                payload: values,
                callback: (result) => {
                    if (result) {
                        history.push({
                            pathname: '/login',
                        });
                    }
                },
            });
        };
        return (
            <Fragment>
                <div className={styles.bg}>
                    <div className={styles.formWrapper}>
                        <div className={styles.formSection}>
                            <h4>课程教学综合评估系统</h4>
                            <div className={styles.form}>
                                <SectionTitle title={'学员注册'}/>
                                <Form
                                    {...layout}
                                    layout="horizontal"
                                    onFinish={handleOk}
                                >
                                    <Form.Item
                                        label="学生姓名"
                                        name="realName"
                                        rules={[{ required: true, message: '必填' }]}
                                    >
                                        <Input placeholder="请输入学生姓名"/>
                                    </Form.Item>
                                    <Form.Item
                                        label="登录账号"
                                        name="loginId"
                                        rules={[{ required: true, message: '必填' }]}
                                    >
                                        <Input placeholder="请输入登录账号"/>
                                    </Form.Item>
                                    <Form.Item
                                        label="登录密码"
                                        name="password"
                                        rules={[{ required: true, message: '必填' }]}
                                    >
                                        <Input placeholder="请输入登录密码"/>
                                    </Form.Item>
                                    <Form.Item
                                        label="学员证号"
                                        name="credentialsNo"
                                        rules={[{ required: true, message: '必填' }]}
                                    >
                                        <Input placeholder="请输入证件号"/>
                                    </Form.Item>
                                    <Form.Item
                                        label="入学时间"
                                        name="enterSchoolDate"
                                        rules={[{ required: true, message: '必填' }]}
                                    >
                                        <DatePicker style={{ width: '100%' }}/>
                                    </Form.Item>
                                    <Form.Item
                                        label="所在单位"
                                        name="leastDepartmentId"
                                        rules={[{ required: true, message: '必填' }]}
                                    >
                                        <Cascader
                                            options={treeData}
                                        />
                                    </Form.Item>
                                    <Form.Item
                                        label="教学班号"
                                        name="classNo"
                                        rules={[{ required: true, message: '必填' }]}
                                    >
                                        <Input placeholder="请输入教学班号"/>
                                    </Form.Item>
                                    <Form.Item {...tailLayout}>
                                        <Button type="primary" htmlType="submit">注册</Button>
                                        <Link className={styles.login} to={'/login'}>使用已有账号</Link>
                                    </Form.Item>
                                </Form>
                            </div>
                        </div>
                    </div>
                </div>
            </Fragment>
        );
    }
}

export default Index;
